import React, { FC, useState } from 'react';
import Test from './Test';
import { Slider, Spin } from 'antd';

const config = [1, 2, 3, 4, 5];

const marks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: <strong>100°C</strong>,
  },
};

const ReactMapDemo: FC = () => {
  const [data, setData] = useState(config);

  const btnClick = () => {
    setData((origin) => [...origin, origin[origin.length - 1] + 1]);
  };

  return (
    <>
      <button onClick={btnClick}>修改data</button>
      {data.map((item, key) => (
        <div key={item}>
          <Test />
        </div>
      ))}
      <Slider
        vertical
        range
        marks={marks}
        defaultValue={[26, 37]}
        className="ax-slider"
      />
    </>
  );
};

export default ReactMapDemo;
